<template>
  <footer class="bottom">
    <div class="left">
      <p id="Thank">Thank For</p>
      <p><span id="version">version</span><span id="VersionNumber">{{ websiteInfo.version }}</span></p>
      <p>建站日期：{{ websiteInfo.create_date }}</p>
    </div>
    <div class="right">
      <div>
        <div id="myqq">
          <img :src="'/api'+websiteInfo.qq_img" id="qqcode" class="code" v-show="qqcode" alt="">
          <img src="./image/qq.svg" id="qq" class="icon" @mouseenter="qqcode=!qqcode"
               @mouseleave="qqcode=!qqcode" alt="">
        </div>
        <div id="mywx">
          <img alt="" :src="'/api'+websiteInfo.wechat_img" id="wxcode" class="code" v-show="wxcode">
          <img alt="" src="./image/wx.svg" id="wx" class="icon" @mouseenter="wxcode=!wxcode"
               @mouseleave="wxcode=!wxcode">
        </div>
        <div>
          <a :href="websiteInfo.github_url" target="_blank">
            <img class="icon" alt="" src="./image/gitee_icon.svg">
          </a>
        </div>
      </div>
      <p>联系邮箱：{{ websiteInfo.email }}</p>
    </div>
  </footer>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "MyBottom",
  data() {
    return {
      qqcode: false,  //判断QQ是否显示
      wxcode: false,  //判断微信是否显示
    }
  },
  computed: {
    ...mapState(['websiteInfo'])
  }
}
</script>

<style scoped lang="less">
/*底部区域位置*/
.bottom {
  position: relative;
  width: 100%;
  height: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  margin-top: 30px;

  /*底部区域位置左边内容*/

  .left {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    /*底部区域位置左边内容p标签*/

    p {
      margin-bottom: 20px;
    }

    /*底部区域位置左边内容中的Thank For字体*/

    #Thank {
      color: #26c6da;
      font-size: 20px;
    }

    /*底部区域位置左边内容中的version字体*/

    #version {
      background-color: #ff9800;
      padding: 5px 10px;
      border-radius: 5px 0 0 5px;
    }

    /*底部区域位置左边内容中的版本号字体*/

    #VersionNumber {
      background-color: #26c6da;
      padding: 5px 10px;
      border-radius: 0 5px 5px 0;
    }
  }

  .right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    p {
      position: relative;
    }

    > div {
      display: flex;
      margin-bottom: 5px;
      height: 80px;
      width: 200px;
      position: relative;
      justify-content: space-evenly;

      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 10px;

        .code {
          height: 45px;
          width: 45px;
          margin-bottom: 5px;
          position: absolute;
          top: -15px;
        }

        .icon {
          height: 35px;
          width: 35px;
          position: absolute;
          bottom: 10px;
        }

        #qq, #qqcode {
          left: 5px;
        }
      }
    }
  }
}
</style>